<template>
	<div class="home">
		<!-- 引入head组件 -->
		<top show="" back='true' :title='title' @clickBtn='backClick'></top>
		<!-- search -->
		<div class="search">
			<div class="search-left" @click="map">
				<img class="address-icon" src="../static/img/address.png" />
				<p>{{city}}</p>
				<p>|</p>
				<p>{{area}}</p>
				<img class="right" src="../static/img/right.png" />

			</div>
			<div class="search-right">
				<img src="../static/img/search.png" />
			</div>
		</div>
		<!-- 轮播图 组件-->
		<swiper></swiper>
		<!-- 选项卡 tab-->
		<div class="tab">
			<div class="tab-title">
				<ul>
					<li v-for="(item,i) in tabTitle" :data-index='i' v-on:click="navClick(i)">
						<img :src='item.img' />
						<p v-bind:style="i==current?{color:'#2FA49B'}:''">{{item.text}}</p>
					</li>
				</ul>
			</div>
			<div class="tab-content">
				<ul>
					<li>
						<nearList @clickevent='clickevent' :nearList='nearList'></nearList>
					</li>
				</ul>
			</div>
		</div>
		<tabbar></tabbar>
		<!-- 获取当前定位 -->
		<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"></baidu-map>
	</div>

</template>

<script>
	// 引入头部组件
	// import top from '@/src/components/top.vue'
	import top from '@/components/top.vue'; //top组件
	import swiper from '@/components/swiper.vue'; //swiper组件
	import nearList from '@/components/near_list.vue'; //列表组件
	import tabbar from '@/components/tabbar.vue';
	import modal from '../routeUrl.js';
	import globaldata from '../globaldata.js';
	import USER_CACHE from '../cache.js';

	export default {
		components: {
			top,
			swiper,
			nearList,
			tabbar
		},
		data() {
			return {
				title: '你好',
				current: 0,
				city: '',
				area: '',
				tabTitle: [{
					id: 0,
					img: require('../static/img/nav1.png'),
					text: '附近动态'
				}, {
					id: 1,
					img: require('../static/img/nav2.png'),
					text: '全城的猫'
				}, {
					id: 2,
					img: require('../static/img/nav3.png'),
					text: '我关注的'
				}],
				nearList: [],
				center: {
					lng: 0,
					lat: 0
				},
				zoom: 15
			}

		},
		created() {
			// 监听页面被销毁或者刷新 清除当前缓存 去请求接口并缓存新的数据
			window.addEventListener('beforeunload', e => this.beforeunloadFn(e));

			if (USER_CACHE.get('nearbyTrends')) {
				if (USER_CACHE.get('nearbyTrends').length > 0) {
					this.nearList = USER_CACHE.get('nearbyTrends');
				} else {
					this.nearbyTrends()
				}
			} else {
				this.nearbyTrends()
			}
			if (this.$store.state.area) {
				this.area = this.$store.state.area
			}
		},
		computed: {

		},
		watch: {

		},
		destroyed() {
			window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
		},
		methods: {
			nearbyTrends() {
				let parms = {
					longitude: '120.384205',
					latitude: '36.073204',
					t_id: globaldata.t_id
				}
				modal.nearbyTrends(parms).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.nearList = res.data;
						USER_CACHE.set('nearbyTrends', res.data);
					}

				})
			},
			beforeunloadFn(e) {
				console.log('刷新或关闭');
				USER_CACHE.removestorage('nearbyTrends');
				this.$store.state.area = null

			},
			backClick: function(event) {
				console.log(event)
			},
			navClick: function(e) {
				console.log(e)
				this.current = e
			},
			handler({
				BMap,
				map
			}) {
				// 检测页面关闭或者刷新
				let _this = this; // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					console.log(r);
					//获取不到街道信息
					_this.city = r.address.city;
					if (_this.$store.state.area) {
						_this.area = _this.$store.state.area
					} else {
						_this.area = r.address.street ? r.address.street : '五四广场0000'
					}

					_this.center = {
						lng: r.longitude,
						lat: r.latitude
					}; // 设置center属性值
					_this.$store.state.latitude = r.latitude;
					_this.$store.state.longitude = r.longitude
					_this.$store.state.city = r.city
					// console.log('center:', _this.center) // 如果这里直接使用this是不行的
				})
			},
			map() {
				this.$router.push({
					name: 'map',
					query: {
						city: this.city,
						center: this.center
					}
				})
			},
			clickevent(e) {
				console.log(e)
				if (e.type == "follow") {
					let parms = {

						t_id: globaldata.t_id,
						follow: e.follow,
						object_id: e.id
					}
					modal.follow(parms).then(res => {
						console.log(res)
						if (res.code == 1) {
							this.nearbyTrends()
						} else {
							alert("关注失败")
						}

					})
				}
				if (e.type == "detail") {
					this.$router.push({
						name: 'detail',
						query: {
							data: e
						}
					})
				}
				if (e.type == "like") {
					let parms = {

						t_id: globaldata.t_id,
						like: e.like,
						object_id: e.id
					}
					modal.like(parms).then(res => {
						console.log(res)
						if (res.code == 1) {
							this.nearbyTrends()
						} else {
							alert("点赞失败")
						}

					})
				}
			},

		},
		mounted() {
			console.log(this.title)
			this.title = '猫票';

		}
	}
</script>

<style lang="scss">
	@import '../assets/scss/main.scss';

	.home {
		background: #F6F6F6;
		padding-bottom: px2vw(115);
	}

	.search-left p {
		font-size: px2vw(13);
		margin-right: px2vw(5);
	}

	.address-icon {
		width: px2vw(15);
		height: px2vw(19);
		margin-right: px2vw(5);
	}

	.search {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
		padding: px2vw(5) px2vw(6);
		box-sizing: border-box;
		background: #fff;
	}

	.search-left {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		;
	}

	.right {
		width: px2vw(6);
		height: px2vw(10);
	}

	.search-right img {
		width: px2vw(16);
		height: px2vw(16);
	}

	/*  */
	.tab-title {
		background: #fff;
	}

	.tab-title ul {
		padding: px2vw(9) px2vw(32);
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.tab-title ul li {
		display: flex;
		display: -webkit-flex;

		flex-direction: column;

		align-items: center;
	}

	.tab-title ul li img {
		width: px2vw(47);
		height: px2vw(47);
		display: block;
	}

	.tab-title ul li p {
		font-size: px2vw(13);
	}
</style>
